<!doctype html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport"
		content="width=device-width,initial-scale=1.0,user-scalable=0,minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title>佣金收入明细</title>
	<style type="text/css">
		[v-cloak] {
			display: none;
		}

		.m-data-list .item>header {
			background-color: #f8f8f8;
			padding: 5px 10px;
			display: flex;
		}

		.m-data-list .item>header>.lt {
			flex: 1;
		}

		.m-data-list .item>header>.rt {
			text-align: right;
			flex: 1;
		}

		.m-data-list ul {
			padding: 0 !important;
		}

		.m-data-list ul>li:last-child {
			border-bottom: none;
		}

		.f-mb-5 {
			margin-bottom: 5px;
		}

		.m-total {
			position: relative;
		}

		.m-total>.tip {
			position: absolute;
			bottom: 2px;
			right: 2px;
			font-size: 9px;
			font-weight: normal;
		}
	</style>
</head>

<body>
	<div id="app" v-cloak>
		<div class="m-top-shift">
			<div class="inner">
				<div class="item" @click="typeShift(1)" :class="{active:off.type == 1}">
					<div class="name">已出账佣金</div>
				</div>
				<div class="item" @click="typeShift(0)" :class="{active:off.type == 0}">
					<div class="name">待出账佣金</div>

				</div>
			</div>
		</div>
		<div class="m-total yellow">
			<span class="dp" v-show="off.type==1">已出账(元):</span>
			<span class="dp" v-show="off.type==0">待出账(元):</span>
			<span class="money">{{ numberFormat(totalFee) }}</span>
			<span class="tip grey" v-show="off.type==0">待出账数据仅供参考，实际以已出账金额为准</span>
		</div>
		<div class="m-data-list">
			<div class="f-scroll" v-if="!off.empty" id="dataBox" @scroll="pullLoad" :style="{height:boxHeight}">
				<div class="item" v-for="month in monthList" v-show="month.list.length">
					<header>
						<span class="lt">{{ month.name }}</span>
						<span class="rt yellow">￥{{ numberFormat(month.totalFee) }}</span>
					</header>
					<ul>
						<li v-for="todo in month.list" @click="jumpDetails(todo.type,todo.orderId)">
							<div class="row">
								<div class="lt">
									<div class="line"><span class="grey">
											<em v-if="off.type == 1">出账时间：</em>
											<em v-else-if="todo.type == 1">开卡时间：</em>
											<em v-else-if="todo.type == 4">制卡时间：</em>
											<em v-else>更新时间：</em>
										</span>{{ getDateTime(todo.time)[7] }}</div>
									<div class="line"><span class="grey">佣金类型：</span>
										<span v-if="todo.type == 1">开卡直接收益</span>
										<span v-if="todo.type == 2">开卡市场补助</span>
										<span v-if="todo.type == 3">开卡市场补助</span>
										<span v-if="todo.type == 4">制卡直接收益</span>
										<span v-if="todo.type == 5">制卡市场补助</span>
										<span v-if="todo.type == 6">制卡市场补助</span>
										<span v-if="todo.type == 7">话分直接收益</span>
										<span v-if="todo.type == 8">话分市场补助</span>
										<span v-if="todo.type == 9">话分市场补助</span>
										<span v-if="todo.type == 10">达量激励</span>
									</div>
									<div class="line">
										<span class="grey">备<em class="space-two"></em>注：</span>
										<span :class="{blue:todo.type == 1}" class="f-fs-12">{{ todo.descStr }}</span>
									</div>
								</div>
								<div class="rt">
									<div v-if="todo.type == 1 || todo.type == 2 || todo.type == 4 || todo.type == 5">
										<div class="grey f-fs-12 f-mb-5">首月服务费/预存返佣</div>
										<div class="money yellow">
											{{ numberFormat(todo.selIncome) }}/{{ numberFormat(todo.preIncome) }}
										</div>
									</div>
									<span class="money yellow" v-else>{{ numberFormat(todo.income) }}</span>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div v-if="!isPullLoad" class="m-dragup-loading">
				<span class="u-icon-loading"></span>
				<span class="text">
					<b>加载中···</b>
				</span>
			</div>
			<div class="f-no-data" v-if="off.empty" :style="{height:boxHeight}">
				<img src="~@/assets/img/default_pic.png" alt="">
				<div class="blue-lt">当前暂无数据</div>
			</div>
			<div class="f-no-more" v-show="isHaveMore">暂无更多</div>
		</div>

	</div>
	<!-- CDN加载Vue库 -->
	<script src="https://cdn.bootcss.com/vue/2.1.5/vue.min.js" type="text/javascript"></script>
</body>

</html>